<template>
  <div class="dataTable" v-on="$listeners">
    <div class="btnGroup" v-if="isSearchTable">
      <div class="btn-left">
        <!--新建按钮需要权限控制-->
        <a-button type="primary" icon="plus" v-if="add" @click="$emit('add')">新建</a-button>
        <span class="more-btn">
          <slot name="moreBtn"></slot>
        </span>
      </div>
      <div class="btn-right">
        <span class="right-btn">
          <slot name="rightBtn"></slot>
        </span>
        <a-button type="primary" @click="search" icon="search" style="margin-right:10px">搜索</a-button>
        <a-button @click="$emit('clearData')">清空</a-button>
      </div>
    </div>
    <div class="table">
      <vxe-toolbar v-if="isCustom" ref="xToolbar1" custom>
        <template #buttons>
          <slot name="xToolbar-left"></slot>
          <slot name="xToolbar1"></slot>
        </template>
      </vxe-toolbar>
      <vxe-table
        class="tableData"
        id="tableData"
        :data="dataList"
        :align="allAlign"
        @checkbox-change="checkboxChangeEvent"
        @checkbox-all="checkboxChangeEvent"
          @cell-dblclick="cellDBLClickEvent"
        :border="border"
        :height="height"
        :loading="loading"
        v-bind="$attrs"
        ref="table"
      >
        <template v-for="(col,index) in colOptions">
          <vxe-table-column
            v-if="col.type === 'checkbox'"
            type="checkbox"
            width="50px"
            fixed="left"
            :key="index"
            v-bind="col.props"
          ></vxe-table-column>
          <vxe-table-column   fixed="left" v-else-if="col.type === 'index'" type="seq" width="50px" :key="col.type" v-bind="col.props"></vxe-table-column>
          <slot v-else-if="col.slotName" :name="col.slotName"></slot>
          <vxe-table-column
            v-else-if="col.enums"
            :title="col.label"
            :width="col.width ? col.width : null"
            :field="col.prop"
            :fixed="col.fixed ? col.fixed : ''"
            :key="index"
            :sortable="sortable"
            v-bind="col.props"
          >
            <template slot-scope="{ row }">
              <span>{{ col.enums[row[col.prop]] }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="col.link"
            :title="col.label"
            :width="col.width ? col.width : null"
            :field="col.prop"
            :fixed="col.fixed ? col.fixed : ''"
            :key="index"
              v-bind="col.props"
            :sortable="sortable"
          >
            <template slot-scope="{ row }">
              <a>
                {{ row[col.prop] }}
              </a>
              <!-- <router-link :to="col.Goto(row)">
              <a >
                {{ row[col.prop] }}
              </a>
              </router-link> -->
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="col.isInputEdit"
            :title="col.label"
            :width="col.width ? col.width : null"
            :field="col.prop"
            :fixed="col.fixed ? col.fixed : ''"
            :key="index"
            :sortable="sortable"
            v-bind="col.props"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
          >
            <template #edit="scope">
              <a-input v-model="scope.row[col.prop]" @blur="e=>input(e,scope.row)" type="text" @change="$refs.table.updateStatus(scope)" allowClear></a-input>
            </template>
          </vxe-table-column>
          <vxe-table-column
            v-else-if="col.isSelectEdit"
            :title="col.label"
            :width="col.width ? col.width : null"
            :fixed="col.fixed ? col.fixed : ''"
            :key="index"
            :sortable="sortable"
            v-bind="col.props"
            :edit-render="{}"
          >
            <template #default="{ row }">
              <span>{{ col.enum[row[col.prop]] }}</span>
            </template>
            <template #edit="{ row }">
              <SelectOption :row="row"   v-bind="col.props" :enums="col.enum" v-on="$listeners" type="select" v-model="row[col.prop]"></SelectOption>
            </template>
          </vxe-table-column>
           <vxe-table-colgroup
            v-else-if="col.children"
            :title="col.label"
            :key="index"
            
          >
           <vxe-table-column
           v-for="(colChil,colChilIndex) in col.children"
           :key="colChilIndex"
           :title="colChil.label"
           :field="colChil.prop"
            width="150"
            
          >
          
          </vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-column
            v-else
            :title="col.label"
            :width="col.width ? col.width : null"
            :field="col.prop"
            :fixed="col.fixed ? col.fixed : ''"
            :key="index"
            :sortable="sortable"
            v-bind="col.props"
          >
          </vxe-table-column>
        </template>
        <slot></slot>
        <slot name="edit"></slot>
      </vxe-table>
      <vxe-pager
        v-if="isPaging"
        background
        size="small"
        :loading="loading"
        :current-page="searchParams.pageIndex"
        :page-size="searchParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="handlePageChange3"
      >
      </vxe-pager>
    </div>
  </div>
</template>

<script>
import SelectOption from './SelectEnum.vue'
export default {
  components: {
    SelectOption
  },
  props: {
    //控制新增按钮
    add: {
      type: Boolean,
      default: true
    },
    //表头配置项
    colOptions: {
      type: Array
    },
    //是否有border
    border: {
      type: Boolean,
      default: true
    },
    //对齐方式
    allAlign: {
      type: String,
      default: 'left'
    },
    //最大高度
    maxHeight: {
      type: Number,
      default: 500
    },
    //请求数据的接口方法
    reqFun: {
      type: Function
    },
    //请求参数
    param: {
      type: [Object]
    },
    //控制显示操作按钮，区分为普通table还是搜索table
    isSearchTable: {
      type: Boolean,
      default: false
    },
    //是否分页
    isPaging: {
      type: Boolean,
      default: true
    },
    //是否排序
    sortable: {
      type: Boolean,
      default: false
    },
    //是否自定义头
    isCustom: {
      type: Boolean,
      default: false
    },
    //兼容渠道价格数据格式问题
    isMapData:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      loading: false,
      total: 0,
      searchParams: this.isPaging
        ? {
            pageIndex: 1,
            pageSize: 20
          }
        : {},
      dataList: [],
      height: this.maxHeight
    }
  },
  created() {
    this.getDataList()
  },
  //   mounted() {
  //   this.getAutoHeight()
  //   const self = this
  //   window.onresize = function() {
  //     self.getAutoHeight()
  //   }
  // },
  
  watch: {
    //搜索使用的参数
    param: {
      handler(newValue) {
        // 此写法为重置参数
        this.searchParams = this.isPaging
          ? {
              pageIndex: 1,
              pageSize: 20
            }
          : {}
          if(newValue){
            this.searchParams = { ...this.searchParams, ...newValue }
          }
       
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 获取列表数据
    async getDataList() {
      if (this.isSearchTable && this.reqFun) {
        this.loading = true
        const res = await this.reqFun(this.searchParams)
        if (res.result) {
          if(!this.isMapData){
             this.dataList = res.result
          }else{
             this.dataList = res.result[0].mapList
             console.log('数据列表====>',this.dataList)
          }
        
          this.total = res.recordCount
        }
        this.loading = false
      }
    },
    //勾选框
    checkboxChangeEvent(val) {
      this.$emit('selectItem', val.records)
    },
    //跳转
    goTo(row, code) {
      this.$router.push({ path: `${row.link}/${code}` })
    },
    //切换分页
    handlePageChange3(val) {
      this.searchParams.pageIndex = val.currentPage
      this.searchParams.pageSize = val.pageSize
      this.getDataList()
    },
    search() {
      this.searchParams.pageIndex = 1
      this.getDataList()
    },
    // 表格自适应
    getAutoHeight() {
      const el = document.querySelector('.tableData')
      console.log('节点',document.defaultView.getComputedStyle(el.parentNode,null))
      const elParent = el.parentNode
      const pt = this.getStyle(elParent, 'paddingTop')
      const pb = this.getStyle(elParent, 'paddingBottom')
      this.$nextTick(() => {
        this.height = elParent.clientHeight - (pt + pb) + 'px'
        console.log('高度',elParent.clientHeight,pt,pb)
      })
    },
    getStyle(obj, attr) {
      // 兼容IE浏览器
      const result = obj.currentStyle
        ? obj.currentStyle[attr].replace('px', '')
        : document.defaultView.getComputedStyle(obj, null)[attr].replace('px', '')
        console.log('result',result)
      return Number(result)
    },
    //双击单元格
    cellDBLClickEvent({row}){
      this.$emit('getDBclickData',row)
    },
    //失去焦点
    input(e,row){
      this.$emit('selectOptionChange',e,row)
    }
  }
}
</script>

<style lang="scss" scoped>
.dataTable {
  margin-top: 20px;
  .btnGroup {
    display: flex;
    justify-content: space-between;
    .btn-left {
      .more-btn {
        margin-left: 10px;
      }
    }
    .btn-right {
      .right-btn {
        margin-right: 10px;
      }
    }
  }
  .table {
    margin-top: 20px;
  }
}
/deep/ .vxe-toolbar .vxe-button--wrapper {
  text-align: right !important;
  display: flex;
  justify-content: space-between;
}
</style>
